import React, { useEffect, useState } from 'react'
import {
    Form,
    Input,
    Button,
    Dialog,
    TextArea,
    DatePicker,
    Selector,
    Slider,
    Stepper,
    Switch,
  } from 'antd-mobile'
import { message,Row,Col } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {Link,useLocation,useNavigate} from 'react-router-dom'
import './lgName.scss'
import { reg } from '../../utils/validate';
import { ajax } from '../../api';

const layout:any={
    inp:{
        width:"100%",
        borderRadius:'0.1rem'
    },
}
export default function LoginByName() {
  return (
    <div className='loginName'>
        <Demo></Demo>
    </div>
  )
}


const Demo = () => {
    const navigate =  useNavigate() 
    const [form] = Form.useForm()
  
      const onFinish =async (values: any) => {
          let res=await ajax.login(values)
          console.log(res);
          if(res.code==200){
            setTimeout(()=>{
              localStorage.setItem("username",values.username)
              sessionStorage.setItem("token",res.token )
              navigate('/home')
            },1000)
          }
          console.log(values);
          
      };
    
      const onFinishFailed = (errorInfo: any) => {
          message.error('请输入正确的表单信息');
      };
  
      const location=useLocation()
      console.log(location);
      useEffect(()=>{
      console.log(form);
       let username= new URLSearchParams(location.search).get('username')
       console.log(username);
       if(username){
         form.setFieldsValue({
           username
         })
       }
       
        
      },[])
    
      return (
        <Form
          layout='horizontal'
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          form={form}
          footer={
            <Button block type='submit' color='primary' size='middle'>
              登录
            </Button>
          }
        >
          <Form.Item 
          label='用户名' 
          name='username'
          rules={[{ required: true, message: '用户名不能为空' }]}
          >
            <Input placeholder='请输入用户名' clearable />
          </Form.Item>
          <Form.Item 
          label='密码' 
          name='password'
          rules={[
            { required: true, message: '密码不能为空' },
            { pattern: reg.pwd, message: '密码为6到16位的字母和数字组合' }
          ]}
          >
            <Input placeholder='请输入密码' clearable type='password' />
          </Form.Item>

          
          <Form.Item
           style={{color:'#fff',display:"flex",justifyContent:'space-between',fontSize:'0.12rem'}}
          >
            <Link to="/register">没有账号，前往注册</Link >
            <Link to="/forgetPass">忘记密码</Link >
          </Form.Item>
        </Form>
      );
    };